<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>列表页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<!-- layuicms -->
	<link rel="stylesheet" href="/static/plugins/layuicms2.0/css/public.css" media="all" />
	
	<!-- jQuery  -->
	<script src="/static/plugins/jquery/jquery-3.6.0.min"></script>
	
	<!-- layui  -->
	<link rel="stylesheet" href="/static/plugins/layui/2.5.6/css/layui.css" media="all" />
	<script type="text/javascript" src="/static/plugins/layui/2.5.6/layui.js"></script>
	
	<!-- common -->
	<link rel="stylesheet" href="/static/assets/css/common.css" media="all" />
	<script type="text/javascript" src="/static/assets/js/common-grid.js"></script>
	
</head>
<body class="childrenBody">
<form class="layui-form" name="searchForm">
	<div class="layui-form-item">
		[(${dto.query.hiddenHtmls})]
		<div class="layui-inline" th:each="displayHtml : ${dto.query.displayHtmls}">
			[(${displayHtml})]
		</div>
		<div class="layui-inline">
			<button class="layui-btn layui-btn-normal layui-btn-sm search_btn" lay-submit lay-filter="searchForm" style="margin-left: 35%;"><i class="layui-icon layui-icon-search"></i> 搜索</button>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-danger layui-btn-sm clean_search_form_btn" style="margin-left: 35%;"><i class="layui-icon layui-icon-close"></i> 清空</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-sm refresh_btn" style="margin-left: 35%;"><i class="layui-icon layui-icon-refresh"></i> 刷新</a>
			<script>
				// 刷新按钮
				$(".refresh_btn").click(function(){
					layer.confirm("确定刷新吗？",{
						btn: ['确定', '取消']
					}, function (index) {
						location.reload();
						layer.close(index);
					});
				});
			</script>
		</div>
	</div>
</form>
<div lay-id="id_of_table_export">
	<table id="grid" lay-filter="gridTable"></table>

	<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		[(${dto.button.htmls})]
	<script>
	[(${dto.button.scripts})]

	$('.btn-add').click(function(){
		var w=($(window).width()*0.9);
		var h=($(window).height() - 50);
		var index = layer.open({
			type: 2,
			area: [w+'px', h +'px'],
			fix: true,
			maxmin: false,
			shadeClose: true,
			shade:0.4,
			title: "新增",
			content: '/add?menuId=' + [[${dto.menu.menuId}]]
		});
	});


	$('.btn-edit').click(function(){

		var rows = layui.table.checkStatus('gridTable').data;
		if (rows.length == 0) {
			alert("请选择一条数据进行操作");
			return;
		} else if (rows.length > 1) {
			alert("只能选择一条数据");
			return;
		}
		var row = rows[0];
		if (!row || row == null) {
				alert("请选择一条数据");
				return;
			}

		var w=($(window).width()*0.9);
		var h=($(window).height() - 50);
		var url = '/edit?menuId=' + [[${dto.menu.menuId}]] + '&valId=' + row['id'];
		var index = layer.open({
			type: 2,
			area: [w+'px', h +'px'],
			fix: true,
			maxmin: false,
			shadeClose: true,
			shade:0.4,
			title: "编辑",
			content: url
		});
	});

	$('.btn-delete-true').click(function(){

		var rows = layui.table.checkStatus('gridTable').data;
		if (rows.length == 0) {
			alert("请选择一条数据进行操作");
			return;
		} else if (rows.length > 1) {
			alert("只能选择一条数据");
			return;
		}
		var row = rows[0];
		if (!row || row == null) {
			alert("请选择一条数据");
			return;
		}
		
		layui.layer.confirm("删除后不可恢复，确定彻底删除？",{
			btn: ['确定', '取消']
		}, function (index) {
			$.ajax({
				type: "POST",
				url: '[[${dto.deleteTrueUrl}]]',
				data: {id: row.id},
				success: function (data) {
					if (data.code == 0) {
						layui.table.reload("gridTable",{
							page: {
								curr: 1
							}
						})
					} else {
						alert(data.msg);
					}
				}
			});
			layer.close(index);
		});
	});
	</script>
	</div>

	<!--操作-->
	<script type="text/html" id="gridBar">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
		<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="look">预览</a>
	</script>
	
	<script type="text/html" th:each="element : ${dto.colEdit.elementArr}" th:id="${element.elementId}" th:utext="${element.elementHtml}">
		
	</script>
</div>
<script type="text/javascript" th:inline="javascript">
var CONFIG = {
		orderby: '[[${dto.menu.orderby}]]',
		sorttype: '[[${dto.menu.sorttype}]]',
		fields: {
			[(${dto.fields})]
		}
	}
layui.extend({
	excel: '{/}/static/plugins/layui/extends/excel/excel'
});
layui.use(['form','layer','laydate','table','excel'],function(){
	var form = layui.form,
	layer = parent.layer === undefined ? layui.layer : top.layer,
	$ = layui.jquery,
	laydate = layui.laydate,
	table = layui.table,
	excel = layui.excel;

	// 列表
	var grid = table.render({
		elem: '#grid',
		id : "gridTable", // 用于复选框获取数据
		method:'post',
		toolbar: '#toolbarDemo',
		defaultToolbar:['filter', {
			title: '导出',
			layEvent: 'table_export',
			icon: 'layui-icon-export'
		}],
		url : '[(${dto.gridRequestUrl})]',
		cellMinWidth : 95,
		page : true,
		request: {
			pageName: 'page',
			limitName: 'size'
		},
		height : "full-125",
		limit : 20,
		limits : [10,50,500,9999],
		cols: [
			[(${dto.cols})]
   		],
   		where: $('form[name="searchForm"]').parseForm()
	});

	// 搜索按钮
	form.on('submit(searchForm)', function(data){
		reloadGrid();
		return false;
	});

	// 清空按钮
	$(".clean_search_form_btn").click(function(){
		layer.confirm("确定清空搜索条件吗？",{
			btn: ['确定', '取消']
		}, function (index) {
			$('form[name="searchForm"]').find('input[type=text],select').each(function() {
				$(this).val('');
			});
			reloadGrid();
			layer.close(index);
		});
	});
	
	// 单元格编辑脚本
	[(${dto.colEdit.elementScriptsOfNoText})]

	table.on('tool(gridTable)', function(obj){
		var data = obj.data, layEvent = obj.event;
		[(${dto.colEdit.elementScriptsOfText})]
	});
	table.on('toolbar(gridTable)', function(obj){
		switch(obj.event){
		case 'table_export':
			doExport();
		};
	});
	table.on('sort(gridTable)', function(obj){
		if (obj.type == 'asc' || obj.type == 'desc') {
			$('form[name="searchForm"]').find('input[name="orderby"]').val(CONFIG.fields[obj.field].sortName);
			$('form[name="searchForm"]').find('input[name="sorttype"]').val(obj.type);
		} else {
			$('form[name="searchForm"]').find('input[name="orderby"]').val(CONFIG.orderby);
			$('form[name="searchForm"]').find('input[name="sorttype"]').val(CONFIG.sorttype);
		}
		reloadGrid();
	});
	
	function doExport() {
		if([[${dto.stateExport}]] == 0) {
			alert('无法导出');
			return;
		}
		
		var id = 'id_of_table_export';
		//根据传入tableID获取表头
		var headers = $("div[lay-id=" + id + "] .layui-table-box table").get(0);
		var htrs = Array.from(headers.querySelectorAll('tr'));
		var titles = {};
		for (var j = 0; j < htrs.length; j++) {
			var hths = Array.from(htrs[j].querySelectorAll("th"));
			for (var i = 0; i < hths.length; i++) {
				var clazz = hths[i].getAttributeNode('class').value;
				if (clazz != ' layui-table-col-special' && clazz != 'layui-hide') {
					//排除居左、具有、隐藏字段
					//修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
					titles['data-field' + i] = hths[i].innerText;
				}
			}
		}
		//根据传入tableID获取table内容
		var bodys = $("div[lay-id=" + id + "] .layui-table-box table").get(1);
		var btrs = Array.from(bodys.querySelectorAll("tr"))
		var bodysArr = new Array();
		for (var j = 0; j < btrs.length; j++) {
			var contents = {};
			var btds = Array.from(btrs[j].querySelectorAll("td"));
			for (var i = 0; i < btds.length; i++) {
				for (var key in titles) {
					//修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
					var field = 'data-field' + i;
					if (field === key) {
						//根据表头字段获取table内容字段
						contents[field] = btds[i].innerText;
					}
				}
			}
			bodysArr.push(contents)
		}
		//将标题行置顶添加到数组
		bodysArr.unshift(titles);
		//导出excel
		excel.exportExcel({
			sheet1: bodysArr
		}, '导出表格' + new Date().toLocaleString() + '.xlsx', 'xlsx');
	}
})

// 弹出页面
function showPageUrl(url) {
	var w=($(window).width()*0.9);
	var h=($(window).height() - 50);
	var index = layer.open({
		type: 2,
		area: [w+'px', h +'px'],
		fix: true,
		maxmin: false,
		shadeClose: true,
		shade:0.4,
		title: "编辑",
		content: url
	});
}

function reloadGrid() {
	layui.table.reload("gridTable",{
		page: {
			curr: 1
		},
		where: $('form[name="searchForm"]').parseForm()
	})
}
</script>
<script>
//扩展jquery的格式化方法，用于表单转JSON
$.fn.parseForm=function(){
	var serializeObj={};
	var array=this.serializeArray();
	var str=this.serialize();
	$(array).each(function(){
		if(serializeObj[this.name]){
			if($.isArray(serializeObj[this.name])){
				serializeObj[this.name].push(this.value);
			}else{
				serializeObj[this.name]=[serializeObj[this.name],this.value];
			}
		}else{
		    serializeObj[this.name]=this.value; 
		}
	});
	return serializeObj;
};
</script>
</body>
</html>